<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据库建表</title>
		<link rel="stylesheet" href='/plug-in/pear/css/pear.css' media="all">
		<link rel="stylesheet" type="text/css" href="/css/base.css" />
		<style>
			.page-content .layui-table-box {
				border-bottom: 1px solid rgb(230 230 230);
			}
		</style>
	</head>
	<body>
		<div class="page-content">
			<fieldset class="layui-elem-field">
				<legend>表单设计</legend>
				<div class="layui-field-box">
					<form class="layui-form" action="" lay-filter="example">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">表名称</label>
								<div class="layui-input-block">
									<input type="text" name="table_name" lay-verify="required" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">表注释</label>
								<div class="layui-input-block">
									<input type="text" name="table_comment" lay-verify="required" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<table class="layui-hide" id="field-table" lay-filter="field-table"></table>
						</div>
						<!-- <div class="layui-form-item">
							<div class="layui-input-block">
								<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
								<button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
								<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
							</div>
						</div> -->
					</form>
				</div>
			</fieldset>
		</div>

		
		<script type="text/html" id="switchNull">
			<input type="checkbox" name="field_null" value="{{d.field_null}}" lay-skin="switch" lay-text="是|否" lay-filter="switchNull" {{ d.field_null == "1" ? 'checked' : '' }}>
		</script>
		<script type="text/html" id="switchKey">
			<input type="checkbox" name="d.field_key" value="{{d.field_key}}" lay-skin="switch" lay-text="是|否" lay-filter="switchKey" {{ d.field_key == "1" ? 'checked' : '' }}>
		</script>
		<script type="text/html" id="toolbarTop">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="add">添加字段</button>
				<!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> -->
				<!-- <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
			</div>
		</script>

		<script src="/plug-in/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="/plug-in/lay-config.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var table = layui.table, $=layui.$, form=layui.form;
			var fieldData = [
					{field_name: "id", field_type: "varchar", field_long: "150", field_double: "0", field_null: "1", field_key: "1", field_comment: "表id"},
					{field_name: "created_time", field_type: "datetime", field_long: "0", field_double: "0", field_null: "1", field_key: "0", field_comment: "添加时间"},
					{field_name: "update_time", field_type: "datetime", field_long: "0", field_double: "0", field_null: "0", field_key: "0", field_comment: "修改时间"},
				]

			var fieldTable = table.render({
				elem: '#field-table',
				toolbar: '#toolbarTop', //开启头部工具栏，并为其绑定左侧模板
				defaultToolbar: null,
				data:fieldData,
				cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				cols: [
					[
						{field: 'field_name', width: 150, title: '字段名', edit: 'text'},
						{field: 'field_type', width: 150, title: '类型'},
						{field: 'field_long', width: 100, title: '长度', edit: 'text'},
						{field: 'field_double', title: '小数点', width: 100, edit: 'text'},
						{field: 'field_null', title: '非NULL', width: 90, templet: '#switchNull'},
						{field: 'field_key', title: '主键', width: 90, templet: '#switchKey'},
						{field: 'field_comment', title: '注释', minWidth: 300, edit: 'text'},
						
					]
				]
			});
			
			// 监听单元格编辑
			table.on('edit(field-table)', function(obj){
				fieldData[$(obj.tr[0]).attr("data-index")][obj.field] = obj.value
				if((obj.field=="field_long" || obj.field=="field_double") && isNaN(parseInt(obj.value))){
					fieldData[$(obj.tr[0]).attr("data-index")][obj.field] = "0";
					fieldTable.reload({data: fieldData});
					layer.msg("只能是数字");
					return;
				}else if(obj.field=="field_long" && !isNaN(parseInt(obj.value))){
					if(parseInt(obj.value)>255){
						fieldData[$(obj.tr[0]).attr("data-index")][obj.field] = "255";
						fieldTable.reload({data: fieldData});
						layer.msg("长度不能超过255");
						return;
					}
				}else if(obj.field=="field_long" || obj.field=="field_double"){
					console.log(parseInt(obj.value))
					fieldData[$(obj.tr[0]).attr("data-index")][obj.field] = parseInt(obj.value)
				}
				fieldTable.reload({data: fieldData});
				// console.log(obj.value); //得到修改后的值
				// console.log(obj.field); //当前编辑的字段名
				// console.log(obj.data); //所在行的所有相关数据  
			});
			
			//监听行非NULL事件
			form.on('switch(switchNull)', function(obj){
				if(obj.elem.checked){
					fieldData[$(obj.elem).parents("tr").attr("data-index")].field_null = "1"
				}else{
					fieldData[$(obj.elem).parents("tr").attr("data-index")].field_null = "0"
				}
			    console.log(fieldData)
			});
			//监听行非NULL事件
			form.on('switch(switchKey)', function(obj){
				if(obj.elem.checked){
					fieldData[$(obj.elem).parents("tr").attr("data-index")].field_key = "1"
				}else{
					fieldData[$(obj.elem).parents("tr").attr("data-index")].field_key = "0"
				}
			    console.log(fieldData)
			});
			
			//头工具栏事件
			table.on('toolbar(field-table)', function(obj){
			    var checkStatus = table.checkStatus(obj.config.id);
			    switch(obj.event){
					case 'add':
						console.log(fieldData)
						if(fieldData[fieldData.length-1].field_name!=""){
							fieldData.push({field_name: "", field_type: "varchar", field_long: "255", field_double: "0", field_null: "0", field_key: "0", field_comment: ""});
							fieldTable.reload({
								data: fieldData
							})
						}else{
							//fieldTable.reload()
							fieldTable.reload({
								data: fieldData
							})
						}
					break;
			    };
			});
		</script>

	</body>
</html>
